*{
    margin: 0;
    padding: 0;
}
body{
    padding: 20px;
}
.box{
    width: 768px;
    height: 352px;
    margin: 0 auto;
    border: 1px solid #00aeec;
    border-radius: 8px;
    font-size: 16px;
    .box-title{
        font-size: 20px;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid #ff9214;
    }
    .all{
        width: 100%;
        .nav{
            position: relative;
            width: 100%;
            height: 50px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px solid #ff9214;
            .nav-item{
                flex-grow: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            .mask{
                position: absolute;
                left: 0;
                top: 0;
                width: 25%;
                height: 100%;
                box-sizing: border-box;
                border-bottom: 4px solid #ff9214;
                background-color: transparent;
            }
        }
        .all-content{
            width: 100%;
            height: 230px;
        }
        .all-content-detail{
            display: flex;
            flex-wrap: wrap;
            margin: 20px 10px;
            opacity: 0;
            animation: cat 0.3s linear forwards;
            .detail-item{
                width: 25%;
                height: 50px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                >div{
                    width: 100%;
                    overflow: hidden;
                    text-align: center;
                    text-overflow: ellipsis;
                    &:nth-child(2){
                        font-size: 13px;
                    }
                }
            }
        }
        .line{
            width: 100%;
            height: 1px;
            box-sizing: border-box;
            border-bottom: 1px solid #ff9214;
        }
        .content-footer{
            display: flex;
            margin: 20px 10px;
            animation: cat 0.3s linear forwards;
            .cf-item{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                >div{
                    width: 100%;
                    overflow: hidden;
                    text-align: center;
                    text-overflow: ellipsis;
                }
                .number{
                    font-size: 13px;
                }
            }
        }
    }
}
@keyframes cat {
    from{
        opacity: 0;
    }to{
        opacity: 1;
    }
}